<template>
  <div class="right-board">
    <el-tabs v-model="currentTab" class="center-tabs">
      <el-tab-pane label="配置" name="field" />
      <el-tab-pane label="数据" name="data" />
      <el-tab-pane label="交互" name="interaction" />
      <el-tab-pane label="参数" name="location" />
    </el-tabs>
    <div class="field-box">
      <el-scrollbar class="right-scrollbar">
        <!-- 组件属性 -->
        <el-form
          v-show="currentTab === 'field'"
          size="small"
          label-width="90px"
        >
          <el-collapse v-model="activeNames" accordion>
            <el-collapse-item title="图层" name="1">
              <el-form-item
                v-if="configData.layerName !== undefined"
                label="图层名称"
              >
                <el-input
                  v-model="configData.layerName"
                  placeholder="请输入图层名称"
                />
              </el-form-item>
            </el-collapse-item>

            <el-collapse-item title="标题" name="2">
              <el-form-item
                v-if="configData.chartOption.title.text !== undefined"
                label="标题"
              >
                <el-input
                  v-model="configData.chartOption.title.text"
                  placeholder="请输入标题"
                />
              </el-form-item>

              <el-form-item
                v-if="configData.chartOption.title.subtext !== undefined"
                label="副标题"
              >
                <el-input
                  v-model="configData.chartOption.title.subtext"
                  placeholder="请输入副标题"
                />
              </el-form-item>
            </el-collapse-item>

            <el-collapse-item title="提示框" name="3">
              <el-form-item v-if="" label="提示单位">
                <el-input
                  v-model="configData.chartOption.unit"
                  placeholder="请输入提示单位"
                />
              </el-form-item>
            </el-collapse-item>

            <el-collapse-item title="饼图" name="4">
              <el-form-item
                v-if="configData.chartOption.isRoseType !== undefined"
                label="南丁格尔玫瑰"
              >
                <el-switch v-model="configData.chartOption.isRoseType" />
              </el-form-item>

              <el-form-item
                v-if="configData.chartOption.radiusI !== undefined"
                label="内半径(%)"
              >
                <el-slider
                  v-model="configData.chartOption.radiusI"
                  :min="1"
                  :max="100"
                  :step="1"
                  show-input
                ></el-slider>
              </el-form-item>

              <el-form-item
                v-if="configData.chartOption.radiusO !== undefined"
                label="外半径(%)"
              >
                <el-slider
                  v-model="configData.chartOption.radiusO"
                  :min="1"
                  :max="100"
                  :step="1"
                  show-input
                ></el-slider>
              </el-form-item>

              <el-form-item
                v-if="configData.chartOption.centerX !== undefined"
                label="与左侧的距离(%)"
              >
                <el-slider
                  v-model="configData.chartOption.centerX"
                  :min="1"
                  :max="100"
                  :step="1"
                  show-input
                ></el-slider>
              </el-form-item>

              <el-form-item
                v-if="configData.chartOption.centerY !== undefined"
                label="与上侧的距离(%)"
              >
                <el-slider
                  v-model="configData.chartOption.centerY"
                  :min="1"
                  :max="100"
                  :step="1"
                  show-input
                ></el-slider>
              </el-form-item>
            </el-collapse-item>

            <el-collapse-item title="柱状图" name="5">
              <el-form-item
                v-if="configData.chartOption.isVertical !== undefined"
                label="竖展示"
              >
                <el-switch v-model="configData.chartOption.isVertical" />
              </el-form-item>

              <el-form-item
                v-if="configData.chartOption.xAxis.show !== undefined"
                label="x轴是否显示"
              >
                <el-switch v-model="configData.chartOption.xAxis.show" />
              </el-form-item>

              <el-form-item
                v-if="configData.chartOption.yAxis.show !== undefined"
                label="y轴是否显示"
              >
                <el-switch v-model="configData.chartOption.yAxis.show" />
              </el-form-item>

              <el-form-item
                v-if="configData.chartOption.xAxis.name !== undefined"
                label="x轴名称"
              >
                <el-input
                  v-model="configData.chartOption.xAxis.name"
                  placeholder="请输入x轴名称"
                />
              </el-form-item>

              <el-form-item
                v-if="configData.chartOption.yAxis.name !== undefined"
                label="y轴名称"
              >
                <el-input
                  v-model="configData.chartOption.yAxis.name"
                  placeholder="请输入y轴名称"
                />
              </el-form-item>

              <el-form-item
                v-if="configData.chartOption.series[0].barWidth !== undefined"
                label="柱体宽度"
              >
                <el-slider
                  v-model="configData.chartOption.series[0].barWidth"
                  :min="1"
                  :max="100"
                  :step="1"
                  show-input
                ></el-slider>
              </el-form-item>

              <el-form-item v-if="" label="显示平均线">
                <el-switch v-model="configData.chartOption.isMarkLine" />
              </el-form-item>

              <el-form-item v-if="" label="显示最大最小值">
                <el-switch v-model="configData.chartOption.isMarkPoint" />
              </el-form-item>

              <el-form-item
                v-if="configData.chartOption.yAxis.splitLine.show !== undefined"
                label="是否显示分隔线"
              >
                <el-switch
                  v-model="configData.chartOption.yAxis.splitLine.show"
                />
              </el-form-item>
            </el-collapse-item>

            <el-collapse-item title="图例" name="6">
              <el-form-item
                v-if="configData.chartOption.legend !== undefined"
                label="是否显示图例"
              >
                <el-switch v-model="configData.chartOption.legend.show" />
              </el-form-item>

              <el-form-item
                v-if="configData.chartOption.legendcenterX !== undefined"
                label="与左侧的距离(%)"
              >
                <el-slider
                  v-model="configData.chartOption.legendcenterX"
                  :min="1"
                  :max="100"
                  :step="1"
                  show-input
                ></el-slider>
              </el-form-item>

              <el-form-item
                v-if="configData.chartOption.legendcenterY !== undefined"
                label="与上侧的距离(%)"
              >
                <el-slider
                  v-model="configData.chartOption.legendcenterY"
                  :min="1"
                  :max="100"
                  :step="1"
                  show-input
                ></el-slider>
              </el-form-item>

              <el-form-item
                v-if="configData.chartOption.legend.orient !== undefined"
                label="图例方向"
              >
                <el-radio-group v-model="configData.chartOption.legend.orient">
                  <el-radio label="horizontal">横向</el-radio>
                  <el-radio label="vertical">纵向</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-collapse-item>

            <el-collapse-item title="动画" name="7">
              <el-form-item
                v-if="configData.chartOption.animate !== undefined"
                label="载入动画"
              >
                <el-select
                  v-model="configData.chartOption.animate"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in animateOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </el-form>
        <!-- 表单属性 -->
        <el-form v-show="currentTab === 'data'" size="small" label-width="90px">
          
           <data-source-config :dataSourceType="configData.chartOption.dataSourceType" :customData="configData" :customId="configData.customId" 
            @changeSource="changeSource"  @changeData="changeData" :baseType="'two'"></data-source-config>

          <el-form-item label="通用处理" v-if="configData.chartOption.customData!==undefined">
            <el-button type="primary" @click="editData">编辑</el-button>
          </el-form-item>

        </el-form>
        <!-- 组件位置 -->
        <el-form
          v-show="currentTab === 'location'"
          size="small"
          label-width="90px"
        >
          <el-form-item label="X位置">
            <el-input-number
              v-model="configData.x"
              controls-position="right"
              :step="1"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="y位置">
            <el-input-number
              v-model="configData.y"
              controls-position="right"
              :step="1"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="宽度">
            <el-input-number
              v-model="configData.width"
              controls-position="right"
              :step="1"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="高度">
            <el-input-number
              v-model="configData.height"
              controls-position="right"
              :step="1"
            ></el-input-number>
          </el-form-item>
        </el-form>

        <!-- 组件交互 -->
        <el-form
          v-show="currentTab === 'interaction'"
          size="small"
          label-width="90px"
        >
          <el-form-item label="是否开启图表联动">
            <el-switch
              v-model="configData.chartOption.isLink"
              @change="isLinkChange"
            />
          </el-form-item>

          <el-form-item
            v-show="configData.chartOption.isLink === true"
            label="参数名称"
          >
            <el-input
              v-model="arrName"
              placeholder="请参数名称"
              @blur.prevent="changeArrName()"
            />
          </el-form-item>

          <el-form-item
            v-show="configData.chartOption.isLink === true"
            label="绑定组件"
          >
            <el-select
              v-model="configData.chartOption.bindList"
              multiple
              placeholder="请选择"
              @change="bindCharts"
            >
              <el-option
                v-for="item in chartList"
                :key="item.customId"
                :label="item.layerName"
                :value="item.customId"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            v-show="configData.chartOption.isLink === true"
            label="*参数说明"
          >
            <div class="el-form-item__content">
              <span style="word-wrap: break-word;"
                ><i style="color:#F00;"
                  >参数名={"legendName":"xx","data":xxx}</i
                ></span
              >
            </div>
            <div class="el-form-item__content">
              <span style="display:block">legendName:图例名称</span>
              <span>data:选中值</span>
            </div>
          </el-form-item>
          <!-- 下钻 -->
          <el-form-item label="是否开启图表下钻">
            <el-switch
              v-model="configData.chartOption.isDrillDown"
              @change="isDrillDownChange"
            />
          </el-form-item>

          <el-form-item
            v-show="configData.chartOption.isDrillDown === true"
            label="下钻后展示的图表类型"
          >
            <el-select
              v-model="configData.chartOption.drillDownChartType"
              clearable
              filterable
              placeholder="请选择"
              @change="drillDownChartChange"
            >
              <el-option
                v-for="item in drillDownOptions"
                :key="item.chartType"
                :label="item.layerName"
                :value="item.chartType"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            v-show="configData.chartOption.isDrillDown === true"
            label="弹窗背景颜色"
          >
            <el-color-picker
              v-model="drillBgColor"
              show-alpha
              @change="drillDownColorChange"
            />
          </el-form-item>

          <el-form-item
            v-show="configData.chartOption.isDrillDown === true"
            label="*参数说明"
          >
            <div class="el-form-item__content">
              <span style="word-wrap: break-word;"
                ><i style="color:#F00;">drillParam=参数值</i></span
              >
            </div>
          </el-form-item>

          <drill-down-config
            :drillDownDialogFlag.sync="drillDownDialogFlag"
            :drillDownDialogData="configData.chartOption.drillDownChartOption"
          />
          <el-form-item
            v-show="configData.chartOption.isDrillDown === true"
            label=""
          >
            <el-button type="primary" @click="DrillDownClick"
              >前去设置</el-button
            >
          </el-form-item>
          <!-- 是否开启图表远程控制 -->

          <el-form-item label="是否开启图表远程控制">
            <el-switch v-model="configData.chartOption.isRemote" />
          </el-form-item>
          <Interactionwebsocket
            v-show="configData.chartOption.isRemote === true"
            :remote="configData.chartOption.remote"
            @getRemote="getRemote"
          ></Interactionwebsocket>
          <el-form-item
            v-show="configData.chartOption.isRemote === true"
            label="*参数说明"
          >
            <div class="el-form-item__content">
              <span style="word-wrap: break-word;"
                ><i style="color:#F00;">{"legendName":"xx","data":xxx}</i></span
              >
            </div>
            <div class="el-form-item__content">
              <span style="display:block">legendName:图例名称</span>
              <span>data:选中值</span>
            </div>
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>
    
    <el-dialog
      title="通用处理"
      v-if="open"
      :visible.sync="open"
      width="1000px"
      hight="900px"
      append-to-body
      :close-on-click-modal="false"
    >
      <data-editor
        :key="aceKey"
        @submitData="submitData"
        @cancelData="cancelData"
        :customData="configData.chartOption.customData==undefined?'':configData.chartOption.customData"
      ></data-editor>


    </el-dialog>      
  </div>
</template>

<script>
import { animateOptions } from "../../animate/animate";
import {
  drillDownOptions,
  getDrillDownOption
} from "@/views/tool/datav/components/config/drillDown/drillDown";
import DrillDownConfig from "./drillDown/drillDownConfig";
import { getLinkChart } from "../../util/LinkageChart";
import Interactionwebsocket from "./chartDB/Interactionwebsocket";
import DataEditor from "@/views/tool/datav/components/config/runcode/DataEditor";
import DataSourceConfig from '@/views/tool/datav/components/config/DataConfig/DataSourceConfig'


export default {
  components: {
    DrillDownConfig,
    Interactionwebsocket,
    DataEditor,
    DataSourceConfig
  },
  props: ["costomData", "drawingList"],
  data() {
    return {
      activeNames: ["1"],
      currentTab: "field",
      configData: this.costomData,
      animateOptions,
      drillDownOptions,
      staticDataValue:
        this.costomData != null? JSON.stringify(this.costomData.chartOption.staticDataValue): "",
      interfaceUrl:this.costomData.chartOption.interfaceURL != ""? this.costomData.chartOption.interfaceURL: "",
      requestParameters:this.costomData.chartOption.requestParameters != ""? this.costomData.chartOption.requestParameters: "",
      token:this.costomData.chartOption.token != "" &&this.costomData.chartOption.token != undefined? this.costomData.chartOption.token: "",
      chartList: this.drawingList,
      arrName:
        this.costomData != null ? this.costomData.chartOption.arrName : "",
      drillDownDialogFlag: false,
      drillBgColor:
        this.costomData.chartOption.drillDownChartOption != null
          ? this.costomData.chartOption.drillDownChartOption.drillBgColor
          : "rgba(4, 12, 121, 1)",
      aceKey:Math.random(),
      open:false,//编辑器弹窗
    };
  },
  //页面加载完执行
  mounted() {
    //获取可联动组件列表
    let chartList = getLinkChart(this.drawingList);
    this.chartList = chartList;
  },
  computed: {},
  watch: {
    configData: {
      deep: true,
      handler(newVal) {
        // console.log("1=>", newVal);
        this.$emit("costom-change", newVal);
      }
    },
    costomData: {
      deep: true,
      handler(newVal) {
        this.configData = newVal;
        this.staticDataValue = JSON.stringify(
          newVal.chartOption.staticDataValue
        );
        this.arrName = newVal.chartOption.arrName;
        this.interfaceUrl = newVal.chartOption.interfaceURL;
        this.requestParameters = newVal.chartOption.requestParameters;
        this.token = newVal.chartOption.token;
              
      }
    },
    
  },
  methods: {
    
    changeSource(val){
      this.$set(this.configData.chartOption, 'dataSourceType', val);
    },
    changeData(val,id,type){
      if(this.configData.customId == id){
        if(type == 'static'){
          this.$set(this.configData.chartOption, 'staticDataValue', JSON.parse(val));
        }else if(type == 'url'){
          
          if(val.type == "interfaceUrl"){
            this.$set(this.configData.chartOption, 'interfaceURL', val.arr);
          }else if(val.type == "requestParameters"){
            this.$set(this.configData.chartOption, 'requestParameters', val.arr);
          }else if(val.type == "requestMethod"){
            this.$set(this.configData.chartOption, 'requestMethod', val.arr);
          }else if(val.type == "token"){
            this.$set(this.configData.chartOption, 'token', val.arr);
          }else if(val.type == "timeout"){
            this.$set(this.configData.chartOption, 'timeout', val.arr);
          }
        }else if(type == 'database'){
          this.$set(this.configData.chartOption, 'database', val.database);
          this.$set(this.configData.chartOption, 'bi', val.bi);
        }else if(type == 'form'){
          this.$set(this.configData.chartOption, 'formSource', val);
        }else if(type == 'websocket'){
           this.$set(this.configData.chartOption, 'interfaceKey', val);
        }
      }
      
    },
    
    changeArrName() {
      this.$set(this.configData.chartOption, "arrName", this.arrName);
    },
    bindCharts(val) {
      this.$set(this.configData.chartOption, "bindList", val);
    },
    isLinkChange() {
      if (this.configData.chartOption.isLink == true) {
        this.$set(this.configData.chartOption, "isDrillDown", false);
        //this.configData.chartOption.isDrillDown == false;
      }
    },
    isDrillDownChange() {
      if (this.configData.chartOption.isDrillDown == true) {
        this.$set(this.configData.chartOption, "isLink", false);
        //this.configData.chartOption.isLink == false;
      }
    },
    drillDownChartChange(value) {
      const chartOption = getDrillDownOption(
        value,
        this.configData.chartOption.theme,
        this.configData.chartOption.bindingDiv
      );
      if (chartOption != null) {
        chartOption.x = -1;
        chartOption.y = -1;
        chartOption.width = 900;
        chartOption.height = 600;
      }
      this.$set(
        this.configData.chartOption,
        "drillDownChartOption",
        chartOption
      );
      this.$set(
        this.configData.chartOption.drillDownChartOption,
        "drillBgColor",
        this.drillBgColor
      );
    },
    drillDownColorChange() {
      if (this.configData.chartOption.drillDownChartOption != null) {
        this.$set(
          this.configData.chartOption.drillDownChartOption,
          "drillBgColor",
          this.drillBgColor
        );
      }
    },
    DrillDownClick() {
      if (
        this.configData.chartOption.drillDownChartType == undefined ||
        this.configData.chartOption.drillDownChartType == null
      ) {
        this.$notify({
          title: "警告",
          message: "请选择关联的下钻组件",
          type: "warning"
        });
        return false;
      }
      this.drillDownDialogFlag = true;
    },
    getRemote(val) {
      this.$set(this.configData.chartOption, "remote", val);
    },
    editData(){
      this.open = true;
    },
    cancelData(){
      this.open = false;
    },
    submitData(data){
      this.$set(this.configData.chartOption, 'customData', data);
      this.open = false;
    }    
  }
};
</script>

<style lang="scss" scoped>
/deep/ .center-tabs .el-tabs__item {
  width: 25%;
  text-align: center;
}
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }
  & .el-input + .el-input {
    margin-left: 4px;
  }
}

.select-item + .select-item {
  margin-top: 4px;
}
.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}
.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
}
.screen > :first-child {
  margin-top: 37px;
}

/**  滚动条凹槽的颜色，还可以设置边框属性  **/
::-webkit-scrollbar-track-piece {
  background-color: #f8f8f8;
  border-radius: 10px;
}
/** 滚动条的宽度  **/
::-webkit-scrollbar {
  width: 9px;

  height: 9px;
}
/** 滚动条的设置  **/
::-webkit-scrollbar-thumb {
  background-color: #dddddd;

  background-clip: padding-box;

  min-height: 28px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #bbb;
}
/deep/ .el-upload-dragger {
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  box-sizing: border-box;
  width: 225px;
  height: 180px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
</style>
